<template>
	<view class="showTotal"  v-if="fillOut" style="background-color:white;"> 
	
 
	
				<view class="show" >
			
					<view style="background-color:white;height: 300rpx;line-height: 60rpx;border-radius: 20rpx;">
						<view style="text-align: center;"><text>{{itemData.dtitle}}</text></view>
						<view style="text-align: center; color:#E31436;"  v-if="itemData.remark"><text>{{itemData.remark}}</text></view>
						<view style="margin: auto;width: 50%;">
							<view><text>优惠券：{{itemData.couponPrice}}</text></view>
							<view><text>预估返：{{itemData.tkmoney}}</text></view>
							<view><text>券后价：{{itemData.actualPrice}}</text></view>
						</view>
						<view style="text-align: center;">
							<button  @click="navigateToDetail(itemData)" style=" margin-top: 0;width: 100%;text-align: center; background-color: #ebebeb;border-radius:24upx ;">
								<text> 领 取</text>
							</button>
							<image src="@/static/images/goods/closePop.jpg" class="closePop"  @click="closePop(false)"></image>
						</view>
							
						
					</view>
					
					
				</view>
				<view class="over"></view>
	</view>
</template>
<script>
	export default {
		//props:["fillOut","itemData"],
		 
		props:{
			fillOut: {
			    type: Boolean,
			    default: false
			},
			itemData:{
				type : Object,
				default :{}
			}
		},
		 
		data() {
			 return{}
		},
		created(){
			console.log('商品信息弹窗展示:')
			console.log(this.itemData)
		},
		onShow() {
			
			uni.showToast({
				icon: 'loading',
				title: '正在搜索...',
				duration: 1000
			})
			
		},
		methods:{
			closePop(fillOut){
				this.$emit('closePop',fillOut);
			},
			navigateToDetail(item){
					this.$emit('navigateToDetail',item);
			}
		}
		
	}
</script>

<style lang="scss" scoped>
    .showTotal{
        .show{
			
            width: 620rpx;
            position: fixed;
            left: 0;
            right: 0;
            top:280rpx;
            margin: auto;
            z-index: 10000;
            .closePop{
                width: 90rpx;
				height: 90rpx;
				border-radius: 14rpx;
               // position: relative;
				//top: 110rpx;
				left: 260rpx;
            }
            &-button{
                width: 400rpx;
                line-height: 96rpx;
                text-align: center;
                color: #fff;
                font-size: 32rpx;
                border-radius: 56rpx;
                background: linear-gradient(90deg, #F97C55 0%, #F44545 100%);
                position: absolute;
                bottom: -135rpx;
                left: 110rpx;
            }
        }
        .over{
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: 0.6;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;//这一步很重要
        }
        
        .button{
            width: 400rpx;
            height: 96rpx;
            background: linear-gradient(90deg, #F97C55 0%, #F44545 100%);
        }
		
    }
</style>
